<template>
  <div>
    <!-- 商铺详情头部 -->
    <!-- <van-nav-bar left-arrow @click-left="onClickLeft" /> -->
    <div class="title">
      <img :src="'//elm.cangdu.org/img/' + shoping.image_path" alt="" />
      <div class="divleft" @click="divleftFn">
        <van-icon size="26px" name="arrow-left" />
      </div>
      <div class="divright" @click="divrightFn">
        <van-icon size="20px" name="arrow" />
      </div>
      <!-- 点击活动跳转淡入 -->
      <transition name="van-fade">
        <div v-show="visible_f">淡入</div>
      </transition>
      <van-card
        :desc="
          shoping.delivery_mode &&
          shoping.delivery_mode.text +
            '／' +
            shoping.order_lead_time +
            '送达／' +
            shoping.piecewise_agent_fee.tips
        "
        :title="shoping.name"
        :thumb="'//elm.cangdu.org/img/' + shoping.image_path"
      >
        <template #tags>
          <div class="notice">公告：欢迎光临，用餐高峰请提前下单，谢谢</div>
        </template>
      </van-card>
      <div class="activity">
        <div class="left" v-for="(val, i) in shoping.activities" :key="i">
          <em>{{ val.icon_name }}</em>
          {{ val.description + "（APP专享）" }}
        </div>
        <div class="right">1个活动<van-icon size="20px" name="arrow" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible_f: false, //淡入
    };
  },
  props: ["shoping"], //商铺信息
  methods: {
    // 点击左边返回
    divleftFn() {
      this.$router.push("/index");
    },
    // 点击右边跳转右滑进入
    divrightFn() {
      this.$router.push({
        path: "/goodShoping/particularsShoping",
        query: {
          shopid: this.shoping.id,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  color: #fff;
  height: 120px;
  img {
    width: 100%;
    height: 100%;
    filter: blur(8px);
  }
  .divleft {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    z-index: 990;
  }
  .divright {
    position: absolute;
    top: 30px;
    width: 100%;
    height: 51px;
    z-index: 990;
    .van-icon-arrow {
      top: 16px;
      float: right;
    }
  }
  .activity {
    position: absolute;
    top: 80px;
    width: 100%;
    line-height: 50px;
    z-index: 990;
    font-weight: 400;
    font-size: 0.75rem;
    em {
      display: inline-block;
      width: 18px;
      height: 18px;
      line-height: 18px;
      margin-left: 15px;
      color: #fff;
      background-color: red;
      text-align: center;
      border-radius: 5px;
    }
    .left {
      float: left;
      left: 0;
    }
    .right {
      float: right;
      right: 0;
    }
  }
  /deep/.van-card {
    position: absolute;
    top: 0;
    color: #fff;
    margin: 0;
    background-color: transparent;
    .van-card__content {
      .van-card__title {
        height: 28px;
        line-height: 28px;
        font-size: 1.3rem;
        font-weight: 700;
        width: 200px;
        margin-bottom: 0.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .van-card__desc {
        color: #fff;
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
      }
      .notice {
        font-size: 0.75rem;
        margin-bottom: 0.4rem;
      }
    }

    .van-card__thumb {
      width: 4.6rem;
      height: 4.6rem;
      margin-right: 7px;
      display: block;
      img {
        border-radius: 0.2rem;
      }
    }
  }
}
</style>